<!-- 资讯 -->
<template>
  <view class="container">
    <u-navbar :is-back="false" title="资讯" title-bold>
      <view class="navbar-right" slot="right" >
				<view class="message-box right-item">
          <u-image width="41rpx" height="44rpx" src="/static/news/zixun_search@2x.png"></u-image>
				</view>
			</view>
    </u-navbar>
    <view class="list">
      <view class="item" v-for="i in 10" @click="$u.func.route('/pages/news/detail')">
        <u-image width="44rpx" height="44rpx" src="/static/news/zixun_logo@2x.png" mode="widthFix"></u-image>
        <view class="main">
          <view class="t">
            <text class="time">2021/06/32 12:23</text>
            <text class="source">链闻ChainNews</text>
          </view>
          <view class="c">
            <text class="title">USDT大额转入币安网交易所</text>
            <view class="content">据非小号数据显示，599987个USDT向币安网交易所转入，价值约600万美元</view>
          </view>
          <view class="b">
            <view class="l">
              <view class="tag">
                <u-image width="14rpx" height="12rpx" src="/static/news/zixun_lihao@2x.png" mode="widthFix"></u-image>
                <text>利好</text>
                <text>24</text>
              </view>
              <view class="tag">
                <u-image width="14rpx" height="12rpx" src="/static/news/zixun_likong@2x.png" mode="widthFix"></u-image>
                <text>利空</text>
                <text>104</text>
              </view>
            </view>
            <view class="share">
              <u-image width="41rpx" height="44rpx" src="/static/news/zixun_share@2x.png" mode="widthFix"></u-image>
              分享
            </view>
          </view>

        </view>
      </view>

    </view>
    
  </view>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {}
}

</script>
<style lang='scss' scoped>
.container {
  background-color: #f4f6f8;
  .right-item{
    margin-right: 20rpx;
  }
  .list {
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .item {
      // border: 1px solid green;
      margin: 20rpx $p 0 $p;
      display: flex;
      .main {
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        margin-left: 10rpx;
        .t{
          display: flex;
          flex-direction: column;
          .time {
            font-size: 28rpx;
            font-family: DINPro;
            font-weight: 400;
            color: #333333;
          }
          .source{
            font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #666666;
          }
        }
        .c {
          display: flex;
          flex-direction: column;
          .title {
            margin: 20rpx 0;
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
          }
          .content {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 48rpx;
          }
        }
        .b {
          display: flex;
          justify-content: space-between;
          margin: 20rpx 0;
          .l{
            display: flex;
            justify-content: space-between;
            .tag {
              
              display: flex;
              justify-content: space-around;
              width: 144rpx;
              height: 40rpx;
              background: #F4F6F8;
              border-radius: 20rpx;

              font-size: 22rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #333333;
            }
          }
          .share {
           display: flex;   
           width: 130rpx;
           justify-content: space-around;
           align-items: center;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #1488FF;
          }
        }
      }
    }
  }
}
</style>